<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>ptemplatejs demo</title>
		<script src="ptemplate.js"></script>
		<script src="ptemplate.extend.tmplattrs.js"></script>
		<script src="ptemplate.extend.tmplfilter.js"></script>
		<script src="ptemplate.extend.tmpltags.js"></script>
		<script src="ptemplate.extend.jsonp.js"></script>
		<script src="ptemplate.extend.ajax.js"></script>
		<script src="ptemplate.extend.touchs.js"></script>
		<script src="ptemplate.extend.callbacks.js"></script>
		<script src="ptemplate.extend.animate.js"></script>
		<script src="ptemplate.extend.video.js"></script>
		<style>
			body {
				background: #f4f5f7;
				font-family: 微软雅黑;
			}
			body, ul, p {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			.pstyle{
				font-size:1rem;
				color:rgb(255,69,0);
			}
			.animate{
				width:200px;
				height:150px;
				background-color:rgb(0,0,0);
			}
			videoplay {
				font-size:12px;
				background: rgba(0, 0, 0, .8);
				display: block;
				margin:10px 0;
				position: relative;
			}
			videoplay.fullscreen {
				background: rgba(0, 0, 0, .8);
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 999999;
			}
			videoplay.fullscreen video {
				height: 100%;
			}
			videoplay span.videostatus {
				position: absolute;
				top: 10px;
				left: 10px;
				padding: 0 5px;
				color: rgba(255, 255, 255, .5);
			}
			videoplay span.videostatus.hide {
				display: none;
			}
			videoplay span.netstate {
				position: absolute;
				top: 10px;
				right: 10px;
				padding: 0 5px;
				color: rgba(255, 255, 255, .5);
			}
		</style>
	</head>
	<body>
		<div p-template="valid_form">
			<validform action="/" method="get" target="_target" submithandle="handleValidForm" errorhandle="handleValidFormError">
				empty: <input type="text" name="usname" value="" datatype="empty" empty_msg="1" error_msg="2" />
				max: <input type="text" name="usname" value="" datatype="max:{6-16}" empty_msg="1" error_msg="2" />
				number max:<input type="text" name="usname" value="" datatype="number max:{6-16}" empty_msg="1" error_msg="2" />
				cn max:<input type="text" name="usname" value="" datatype="cn max:{6-16}" empty_msg="1" error_msg="2" />
				mobile max:<input type="text" name="usname" value="" datatype="mobile" empty_msg="1" error_msg="2" />
				email max:<input type="text" name="usname" value="" datatype="email" empty_msg="1" error_msg="2" />
				url max:<input type="text" name="usname" value="" datatype="url" empty_msg="1" error_msg="2" />
				<button type="button" datatype="submit">send form</button>
			</validform>
		</div>
		<script type="text/html" p-template="my-component">
			<article>
				<header>
					<h1>{{title}}</h1>
					<p>header desc...</p>
				</header>
				<my-component-1 title="click me!"></my-component-1>
			</article>
		</script>
		<script type="text/html" p-template="html">
			<article>
				<header>
					<h1>include html!</h1>
				</header>
			</article>
		</script>
		<script type="text/html" p-template="my-component-1">
			<article>
				<header>
					<h1>header1 - <a p-custom:href="/bbb" p-handle:click.prevent="handleClickFnA">{{title}}</a></h1>
					<p>header1 desc...</p>
				</header>
			</article>
		</script>
		<div p-template="test">
			<videoplay src="{{videourl}}" controls="false"></videoplay>
			<animate end="width:100px;height:50px" speed="1000" callback="handleAnimateEnd">
				<div class="animate"></div>
			</animate>
			<button p-handle:click="buttonAnimateHandle">play</button>
			<div class="ifgroup_demo">
				{{a}}
				<if-group>
					<if express="{{a}} == 3">
						<b>a</b>
					</if>
					<else-if express="{{a}} == 2">
						<b>b</b>
					</else-if>
					<else>
						<b>c</b>
					</else>
				</if-group>
				<if express="{{a}} == 1">
					<b>a</b>
				</if>
				<input type="text" value="{{a}}" p-handle:change="handleIfgroupChange" />
			</div>
			<h1 p-custom:title="('header_title_'+'{{title | lowercase}}').toUpperCase()" p-custom:data-custom="{{title | custom : 123}}">header_{{title | lowercase}}</h1>
			<a p-router:href="/test" target="_blank" p-handle:click="handleClickFn" p-handle:watch="handleWatchFn : {{title}}">{{title | lowercase}}</a><br />
			<input type="text" value="{{title | uppercase}}" p-handle:change="handleChangeFn" />
			<input type="button" value="{{ resetButtonText | uppercase }}" p-handle:click.prevent="handleButtonAlert : hello world!" />
			<span p-style:json="{display:'block',border:'1rem solid rgb(30,144,255)'}">
				<b p-express:if="'{{title | lowercase}}' == 'test'" style="{{style | cssPrefix}}" p-style:text="display:inline-block;font-size:2rem;">1</b>
				<b p-express:if="'{{title | lowercase}}' != 'test'" p-style:class="pstyle">2</b>
			</span>
			<p>
				<span p-express:if="test">test demo1</span>
				<span p-express:if="xxx">test demo2</span>
			</p>
			<button p-handle:tap="handleButtonTap">tap button</button>
			<div title='{{open == false ? "-" : "+"}}' style="{{open == false ? 'display:block' : 'display:none'}}">{{open ? "-" : "+"}}</div>
			<a p-router="/test" href="#" p-handle:click="handleNoTypeClick">no type</a>
			<ul>
				<li p-express:for="i in data" p-express:if="index % {{index}}">
					<a p-custom:href="{{url}}" target="_blank" p-handle:click="handleForClick">{{newstitle}}</a>
				</li>
			</ul>
			<my-component title="{{title}}"></my-component>
			<!-- 模板的引用 -->
			<div p-html="html"></div>
		</div>
		<div id="main" style="border:4px solid #000"></div>
		<div id="mainA"></div>
		<div id="mainB"></div>
		<div id="mainC"></div>
		<div id="mainD"></div>
		<div id="mainE"></div>
		<script type="text/html" p-template="forin">
			<div>
				<div p-express:for="item in data.list.items">
					<span>{{title}}</span>
				</div>
			</div>
		</script>
		<div id="mainF"></div>
		<script>
			(function(win, $){
				$.ready(function(){  //页面准备后的回调
					$.extend($.__mod__.tmplThesaurus, {  //对象的扩展
						custom: function(val, filterCondition){
							console.log(val, filterCondition)
							return val;
						}
					});
					//设置页面基础字体大小
					$.setBaseFontSize(16);
					//获取页面基础字体大小
					var baseFontSize = window.baseFontSize || $.getBaseFontSize(),
						//创建样式
						styles = $.createStyle({
							alink: {
								fontWeight:400,
								fontSize:(30/baseFontSize).toFixed(4)+"rem",
								color:"rgb(255,255,255)",
								width:(40/baseFontSize).toFixed(4)+"rem",
								height:(40/baseFontSize).toFixed(4)+"rem",
								textAlign:"center",
								borderRadius:(30/baseFontSize).toFixed(4)+"rem",
								display:"inline-block",
								backgroundColor:"rgb(100,149,237)"
							},
							alinkbutton:{
								fontWeight:400,
								fontSize:(80/baseFontSize).toFixed(4)+"rem"
							}
						});

					var mixins = {
						watch:{
							title: function(val){
								return val.toUpperCase() + "_" + Math.random(10).toFixed(2)
							}
						}
					}, mixinsA = {
						watch:{
							title: function(val){
								return val.toUpperCase() + "_" + (new Date().getTime())
							}
						}
					};

					$.render("valid_form", {
						handle:{
							handleValidForm: function(e){
								console.log("ajax")
							},
							handleValidFormError: function(e, errorElem, errorType){
								console.log("error", errorElem, errorType)
							}
						}
					});

					$.render("forin", {
						data:{
							list:{
								items:[{
									title:"forin title"
								},{
									title:"forin title"
								},{
									title:"forin title"
								},{
									title:"forin title"
								},{
									title:"forin title"
								}]
							}
						}
					}, $.query("#mainF"));

					//创建模板
					$.createTemplate("html").createTemplate("my-component", {
						title: "header"
					}).createTemplate("my-component-1", {
						title: "header1",
						handle:{
							handleClickFnA:function(e){
								console.log(e)
							}
						}
					}).router({  //路由设置
						"/test":{
							path: "/",
							params: {
								a:1
							}
						},
						"/test":{
							path:"/no type/",
							params: {
								b:2
							}
						}
					}).render("test", {  //渲染DOM
						title: "test",
						index:2,
						style: styles.alink,
						buttonText: "alert window",
						open: false,
						a: 1,
						videourl:"video.mp4",
						data:[{
							newstitle: "1 news item title ...",
							url: "/ccc"
						},{
							newstitle: "2 news item title ...",
							url: "/ccc"
						},{
							newstitle: "3 news item title ...",
							url: "/ccc"
						},{
							newstitle: "4 news item title ...",
							url: "/ccc"
						},{
							newstitle: "5 news item title ...",
							url: "/ccc"
						}],
						computed: {
							resetButtonText:function(){
								return this.buttonText.split('').reverse().join('');
							}
						},
						handle: {
							handleIfgroupChange: function(e){
								this._set("test", {
									a: this._val()
								});
							},
							buttonAnimateHandle: function(e){
								this._parents()[0]._query(".animate")[0]._trigger("animate");
							},
							handleAnimateEnd: function(e){
								console.log("animate end")
							},
							handleButtonTap: function(e, type){
								console.log(e, type)
							},
							handleNoTypeClick(e, msg){
								alert(msg)
							},
							handleButtonAlert(e, msg){
								this._set("test", {
									buttonText: msg
								});
								alert(msg)
							},
							handleForClick(e){
								e.preventDefault();
								console.log("forClick")
							},
							handleWatchFn(e, msg){
								console.log(e.type, msg)
							},
							handleClickFn(e) {
								e.preventDefault();
								console.log(e.type,1);
							},
							handleChangeFn(e){
								console.log(e.type);
								this._set("test", {
									title: this.value
								})
							}
						}
					}, function(elem) {
						console.log(elem);
					}).clone("test", "test1").render("test1", function(next){
						next($.extend({data: [{
									newstitle: "1 news item title ...",
									url: "/ccc"
								},{
									newstitle: "2 news item title ...",
									url: "/ccc"
								},{
									newstitle: "3 news item title ...",
									url: "/ccc"
								},{
									newstitle: "4 news item title ...",
									url: "/ccc"
								},{
									newstitle: "5 news item title ...",
									url: "/ccc"
								}]},{  //clone克隆模板
							title: "test1",
							index: 3,
							style: styles.alink,
							handle: {
								handleWatchFn(e){
									console.log(e.type)
								},
								handleClickFn(e) {
									e.preventDefault();
									console.log(e.type,2);
								},
								handleChangeFn(e){
									console.log(e.type);
									this._set("test1", {
										title: this.value
									})
								}
							}
						}));
					}, $.query("#main"), function(elem) {  //query选择器
						console.log("->", elem)
					}).clone("test1", "test2").render("test2", {
						title: "test2",
						index: 0,
						style: styles.alink,
						handle: {
							handleWatchFn(e){
								console.log(e.type)
							},
							handleClickFn(e) {
								e.preventDefault();
								console.log(e.type,3);
								this.parentNode._append($.createDom("span", {  //_append追加标签
									title: "kkk",
									css: {
										display: "block"
									}
								}, $.createDom("a", {  //创建标签
									href: "/bbb",
									text: "baba",
									style: $.getStyle("alinkbutton") || styles.alinkbutton,  //获取样式类值
									handle: {
										click: function(e){
											e.preventDefault();
											console.log(e)
										}
									}
								}, $.createDom("i", {
									class: "bi bf"
								}))))
							},
							handleChangeFn(e){
								console.log(e.type);
								this._set("test2", {  //设置模板的数据
									title: this.value
								})
							}
						}
					}, $.query("#mainA"), function(elem) {  //渲染后的回调
						console.log(elem)
						$.update("test1", {
							title:"test_up",
							open: false,
							a: 2,
							data: [{
								newstitle: "6 news item title ...",
								url: "/ccc"
							}, {
								newstitle: "7 news item title ...",
								url: "/ccc"
							}, {
								newstitle: "8 news item title ...",
								url: "/ccc"
							}, {
								newstitle: "9 news item title ...",
								url: "/ccc"
							}, {
								newstitle: "10 news item title ...",
								url: "/ccc"
							}]
						})
					}).render(function(success, error){
						var elem = $.createDom("script", {
							"p-template": "test201706161637",
							type: "text/html"
						}, $.createDom("h1", {
							html: "header_{{title | express : parseInt(this) % 3 + title}}"
						}), $.createDom("input", {
							value: "{{title}}",
							"p-handle:change": "handleChangeFn"
						}));
						elem._prependTo($.mixElement(document.body));
						success(elem);
					}, {
						title: "3",
						handle:{
							handleChangeFn(e){
								this._set("test201706161637", {  //设置模板的数据
									title: this.value
								})
							}
						}
					}, $.query("#mainB"), function(elem){
						console.log(elem)
					}).render($.createDom("script", {
							"p-template": "test201706161640",
							type: "text/html"
						}, $.createDom("h1", {
							html: "header_{{title}}"
						}), $.createDom("input", {
							value: "{{title}}",
							"p-handle:change": "handleChangeFn"
						}))._prependTo($.mixElement(document.body)), {
						title: "test4",
						handle:{
							handleChangeFn(e){
								this._set("test201706161640", {  //设置模板的数据
									title: this.value
								})
							}
						}
					}, $.query("#mainC"), function(elem){
						console.log(elem)
					}).render(
						'<div p-template="test201706200915"><article><header><h1>header_{{title}}</h1></header></article></div>',
						{
							title:"test5"
						}, 
						$.query("#mainD"), 
						function(elem){
							console.log(elem)
						}
					).render({
						render: function(createDom){
							return createDom("script", {
								"p-template": "test201707051053",
								type:"text/html"
							}, createDom("input",{
								value: '{{title}}',
								"p-handle:change": "handleinputChange"
							}), createDom("h1", {
								html: "{{title}}"
							}));
						}
					}, {
						title: "test6",
						mixins: [mixins, mixinsA],
						handle:{
							handleinputChange: function(e){
								this._set("test201707051053", {
									title: this._val()
								});
							}
						},
						watch:{
							title: function(val){
								return val.toUpperCase();
							}
						},
						created: function(elem){
							console.log("created", elem);
						}
					},
					$.query("#mainE"));
				});
				console.log($.__mod__.templates)
			})(this, pTemplate);
		</script>
	</body>
</html>